<div id='Terminal' class="OneContainer">
	<div class="row">
		<div class="col-md-12">
			<div class="Panel PanelGray">
				<div class="PanelBody">
					<div class="row">
						<div class="col-md-7" style="text-align: center;margin-top: 2px;">
							<div class="input-group input-group-sm">
								<span class="input-group-addon">/</span>
								<input type="text" id="" class="form-control" @keyup.up="toCommandhi(1)"
									@keyup.down="toCommandhi(-1)" @keyup.enter="toCommand" v-model="command" type="text"
									autocomplete="off" placeholder="[命令输入框] 请输入您要执行的命令..."
									aria-describedby="sizing-addon3">
							</div>
						</div>
						<div class="col-md-5 PanelItemF" style="text-align: center;">
							<div class="PanelItem mb0"
								v-on:click="RES.redirectPage('./template/component/console.html', 'server/console', MCSERVER.listenServername);">
								<span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span> 返回
							</div>
							<div class="PanelItem mb0" v-on:click="stopServer()" v-show="!isHistoryMode">
								<span class="glyphicon glyphicon-pause" aria-hidden="true"></span> 关闭
							</div>
							<div class="PanelItem mb0" v-on:click="toOpenServer()" v-show="!isHistoryMode">
								<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
								开启
							</div>
							<div class="PanelItem mb0" v-on:click="loadHistory()" v-show="!isHistoryMode">
								<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> 历史模式
							</div>
							<div class="PanelItem mb0" v-on:click="loadHistory()" v-show="isHistoryMode">
								<span class="glyphicon glyphicon-console" aria-hidden="true"></span> 正常模式
							</div>
							<div class="PanelItem mb0" v-on:click="simpleLoadHistory()" v-show="isHistoryMode">
								<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
								前一段
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	MI.rListener('onload', function () {
		// 定义页面地址
		TOOLS.definePage('template/component/terminal', 'server/console', MCSERVER.listenServername);

		PAGE.serverName = MCSERVER.listenServername;

		// 终端窗口显示
		$('#WebTerminalScreenWapper').removeAttr('style');
		$('#WebTerminal').removeAttr('style');
		$('#LogHistoryTerminal').html('');


		// 若终端未初始化则初始化终端与其方法
		if (!MCSERVER.term) {
			// 根据浏览器的高宽来决定终端的列数和行数
			var clientHeight = document.body.clientHeight - 60;
			var clientWidth = $('#WebTerminal').width();
			var rows = parseInt(clientHeight / 18) - 1;
			var cols = parseInt(clientWidth / 8) - 4;
			var fontSize = 14;
			if (document.body.clientWidth <= 820) {
				fontSize = 10;
				rows = parseInt(clientHeight / 14);
				cols = parseInt(clientWidth / 3);
			}
			var tempCommandString = "";
			var term = MCSERVER.term = new Terminal({
				disableStdin: true,
				rows: rows,
				cols: cols,
				fontSize: fontSize,
				convertEol: true
			});
			// 终端基本颜色代码
			term.TERM_TEXT_RED = "\x1B[31m";
			term.TERM_TEXT_GREEN = "\x1B[32m";
			term.TERM_TEXT_YELLOW = "\x1B[33m";
			term.TERM_TEXT_BLUE = "\x1B[34m";
			term.TERM_TEXT_FUCHSIA = "\x1B[35m";
			term.TERM_TEXT_CYAN = "\x1B[36m";
			term.TERM_TEXT_WHITE = "\x1B[37m";
			term.TERM_TEXT_B = "\x1B[1m";
			// 装载终端到 DOM 对象
			term.open(document.getElementById('WebTerminal'));
			// 终端提示行
			term.prompt = function (command) {
				term.write('\x1B[1;1;33m' + '[' + term.TERM_TEXT_WHITE
					+ term.TERM_TEXT_GREEN + PAGE.serverName + '@' + 'app'
					+ term.TERM_TEXT_YELLOW + ']' + term.TERM_TEXT_WHITE
					+ (MCSERVER.username.substr(0, 1) == '#' ? '# ' : '$ ')
					+ (command || '')
					+ '\x1B[0m \r\n');
			}
			// 初始化终端方法
			term.startTerminal = function () {
				MCSERVER.term.clear();
				MCSERVER.term.prompt();
			}

		}
		// 清空屏幕并输出基本欢迎语
		MCSERVER.term.startTerminal();

		// 监听此实例的标准输出，接下来将会有信息主动传来
		WS.sendMsg('server/console/ws', PAGE.serverName);

		// 加载此网页时立刻请求一次历史
		WS.sendMsg('server/console/history_reverse', JSON.stringify({
			serverName: PAGE.serverName
		}));

		VIEW_MODEL.newVue('Terminal', {
			el: '#Terminal',
			data: {
				allowedStart: true,
				command: '',
				commandList: [],
				commandListPrint: 0,
				historyIf: false,
				isHistoryMode: false
			},
			methods: {
				toOpenServer: function () {
					WS.sendMsg('server/console/open', PAGE.serverName);
				},
				toCommand: function (parCommand) {
					if (parCommand && typeof (parCommand) == 'string') this.command = parCommand;
					MCSERVER.term.prompt(this.command);
					var data = {
						command: this.command,
						serverName: PAGE.serverName
					};
					if (this.command.length >= 1 || typeof (parCommand) == 'string') {
						//压入命令栈 并 发送
						this.commandList.unshift(this.command);
						WS.sendMsg('server/console/command', JSON.stringify(data));
					}
					this.command = '';
					this.commandListPrint = 0;

				},
				toCommandhi: function (fl) {
					if (this.commandListPrint > (this.commandList.length - 1)) this.commandListPrint = this.commandList.length -
						1;
					if (this.commandListPrint < 0) this.commandListPrint = 0;
					if (fl == 1) { //up
						this.command = this.commandList[this.commandListPrint];
						this.commandListPrint++;
					} else { //down
						this.command = this.commandList[this.commandListPrint];
						this.commandListPrint--;
					}
					return false;
				},
				stopServer: function () {
					this.toCommand('__stop__');
				},
				loadHistory: function (bool) {
					if (!this.isHistoryMode) {
						$('#WebTerminal').css('display', 'none');
						$('#LogHistoryTerminal').removeAttr('style');
						// 加载下一页历史记录
						WS.sendMsg('server/console/history', JSON.stringify({
							serverName: PAGE.serverName
						}));
						this.isHistoryMode = true;
					} else {
						$('#WebTerminal').removeAttr('style');
						$('#LogHistoryTerminal').css('display', 'none').html('');
						// 重置历史记录指针
						WS.sendMsg('server/console/history_reset', JSON.stringify({
							serverName: PAGE.serverName
						}));
						this.isHistoryMode = false;
					}
				},
				simpleLoadHistory: function () {
					WS.sendMsg('server/console/history', JSON.stringify({
						serverName: PAGE.serverName
					}));
				}
			}
		});
	});

	MI.rListener('onend', function () {
		window.MCSERVER.term.clear();
		// 终端窗口隐藏
		$('#WebTerminalScreenWapper').css('display', 'none');
		$('#WebTerminal').removeAttr('style');
		$('#LogHistoryTerminal').css('display', 'none');
		$('#LogHistoryTerminal').html('');
		// 退出监听实例，停止接受控制台信息
		WS.sendMsg('server/console/remove', '');
	})
</script>